Styles in components are scoped . This means that the styles in one component will only apply in that particular component.

<h2>My first Svelte component</h2>

<p>Hello World</p>

<a href="https://www.youtube.com/lihautan">Link to Li Hau's youtube</a>
<a href="https://www.youtube.com/@henrikvilhelmberglund">Link to my youtube</a>

<style>
  h2 {
    color: rebeccapurple;
    animation: zoom 5s infinite;
    @apply text-center;
    
  }
  p {
    color: blue;
    font-size: 44px;
  }
  @keyframes zoom {
    0%, 100% { transform: scale(2)}
    50% { transform: scale(0.5)}
  }
  
</style>

<h2>Another component</h2>

<p>Bye world</p>

<a href="https://twitter.com/lihautan">Link to Li Hau's twitter</a>
<a href="https://twitter.com/henrikvberglund">Link to my twitter</a>

Here we have two components. Even though both have <h2> tags and <p> tags, the styles from the left component don't apply to the right component. The same is true for classes and animation keyframes .

This means that it's very easy to write CSS in the components themselves because you don't have to worry about any styles colliding.

If you have a style but it's not being used Svelte will discard it when compiling creating an optimized CSS file.

Global styles

If you really want to you can also have global styles . To do that you write :global(selector)

<p>Phew, p tags are small.</p>

Or, like in this case, put them inside a style tag in

<svelte:head>
  <!-- put style tag with global styles here -->
</svelte:head>

The benefit of this approach is that you can actually disable the global style like I did here with a button, whereas the :global(selector) approach will apply the global style everywhere without an easy way to disable it.

For animation keyframes you can add -global- before the identifier to make it global.